<template>
  <div class="custom-data-container">
    <span class="custom-data-title"> 自定义数据 </span>
    <div style="text-align: left;">

      <div class="data-items">
        <span>图层信息</span>
        <div>
          <el-checkbox v-model="geojsonChecked" label="geojson" size="large" @change="changeGeojson" />
          <el-checkbox v-model="kmlChecked" label="KML" size="large" @change="changeKml" />
          <el-checkbox v-model="glbChecked" label="glb" size="large" @change="changeGlb" />
          <el-checkbox v-model="model3dtilesChecked" label="3dtiles" size="large" @change="changeModel3dtiles" />
          <el-checkbox v-model="czmlChecked" label="czml" size="large" @change="changeCzml" />
        </div>

      </div>
      <div class="data-items">
        <span>自定义服务</span>
        <div>
          <el-checkbox v-model="wmsImageTestChecked" label="影像WMS(需配置url、layer等信息)" size="large" @change="changeWmsImageTest" />
          <el-checkbox v-model="wmsShpTestChecked" label="矢量WMS(需配置url、layer等信息)" size="large" @change="changeWmsShpTest" />
          <el-checkbox v-model="wmtsImageTestChecked" label="影像WMTS(需配置url、layer等信息)" size="large" @change="changeWmtsImageTest" />
          <el-checkbox v-model="xyzImageTestChecked" label="离线XYZ瓦片(需配置url、layer等信息)" size="large" @change="changeXyzImageTest" />

        </div>

      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { czmlTestInfo, geojsonTestInfo, glbTestInfo, kmlTestInfo, LayerIdFlag, model3dtilesTestInfo, wmsImageTestInfo, wmsShpTestInfo, wmtsImageTestInfo, xyzImageTestInfo } from '@/system/LayerManager/LayerConfig'
import LayerManager from '@/system/LayerManager/LayerManager'
import CesiumViewer from '@/Viewer/CesiumViewer'
import { Cartesian3 } from 'cesium'

const viewer = CesiumViewer.viewer
let mLayerManager: LayerManager | null = null

const geojsonChecked = ref(false)
const kmlChecked = ref(false)
const glbChecked = ref(false)
const model3dtilesChecked = ref(false)
const czmlChecked = ref(false)
const wmsImageTestChecked = ref(false)
const wmsShpTestChecked = ref(false)
const wmtsImageTestChecked = ref(false)
const xyzImageTestChecked = ref(false)

onMounted(() => {
  mLayerManager = LayerManager.getInstance(viewer!)
})

const changeGeojson = (val: string | number | boolean) => {
  if (val) {
    // 加载geojson图层
    mLayerManager?.Add(geojsonTestInfo)
  } else {
    // 移除geojson图层
    mLayerManager?.Remove(LayerIdFlag.GEOMSON_TEST)
  }
}

const changeKml = (val: string | number | boolean) => {
  if (val) {
    // 加载kml图层
    mLayerManager?.Add(kmlTestInfo)
  } else {
    // 移除kml图层
    mLayerManager?.Remove(LayerIdFlag.KML_TEST)
  }
}
const changeGlb = (val: string | number | boolean) => {
  if (val) {
    // 加载glb图层
    mLayerManager?.Add(glbTestInfo)
  } else {
    // 移除glb图层
    mLayerManager?.Remove(LayerIdFlag.GLB_TEST)
  }
}

const changeModel3dtiles = (val: string | number | boolean) => {
  if (val) {
    // 加载3dtiles图层
    mLayerManager?.Add(model3dtilesTestInfo)
  } else {
    // 移除3dtiles图层
    mLayerManager?.Remove(LayerIdFlag.MODEL_3DTILES_TEST)
  }
}

const changeCzml = (val: string | number | boolean) => {
  if (val) {
    // 加载czml图层
    mLayerManager?.Add(czmlTestInfo)
  } else {
    // 移除czml图层
    mLayerManager?.Remove(LayerIdFlag.CZML_TEST)
  }
}

const changeWmsImageTest = (val: string | number | boolean) => {
  if (val) {
    // 加载wms影像图层
    mLayerManager?.Add(wmsImageTestInfo)
    // 跳转到指定坐标
    viewer?.camera.flyTo({
      destination: Cartesian3.fromDegrees(108.8, 37.9, 1000000.0)
    });
  } else {
    // 移除wms影像图层
    mLayerManager?.Remove(LayerIdFlag.WMS_IMAGE_TEST)
  }
}
const changeWmsShpTest = (val: string | number | boolean) => {
  if (val) {
    // 加载wms矢量图层
    mLayerManager?.Add(wmsShpTestInfo)
    // 跳转到指定坐标
    viewer?.camera.flyTo({
      destination: Cartesian3.fromDegrees(116.37, 40.22, 1000000.0)
    });
  } else {
    // 移除wms矢量图层
    mLayerManager?.Remove(LayerIdFlag.WMS_SHAPETEST)
  }
}

const changeWmtsImageTest = (val: string | number | boolean) => {
  if (val) {
    // 加载wmts影像图层
    mLayerManager?.Add(wmtsImageTestInfo)
    // 跳转到指定坐标
    viewer?.camera.flyTo({
      destination: Cartesian3.fromDegrees(108.8, 37.9, 1000000.0)
    });
  } else {
    // 移除wmts影像图层
    mLayerManager?.Remove(LayerIdFlag.WMTS_IMAGE_TEST)
  }
}

const changeXyzImageTest = (val: string | number | boolean) => {
  if (val) {
    // 加载离线TMS瓦片图层
    mLayerManager?.Add(xyzImageTestInfo)
    // 跳转到指定坐标
    viewer?.camera.flyTo({
      destination: Cartesian3.fromDegrees(111.559, 37.476, 1000000.0)
    });
  } else {
    // 移除离线TMS瓦片图层
    mLayerManager?.Remove(LayerIdFlag.XYZ_IMAGE_TEST)
  }
}



</script>
<style lang="scss" scoped>
.custom-data-container {
  padding: 10px;

  .custom-data-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }



  .data-items {
    margin-top: 10px;

    .el-checkbox {

      margin-left: 20px;
      height: 30px;
    }

    :deep(.el-checkbox__label) {
      color: rgb(206, 194, 194);
    }
  }

}
</style>
